<template>
  <div>
    <Button @click="printData" type="primary">打印</Button>
    <!-- 页面显示区 -->
    <div style="width:900px;margin-left:auto; margin-right:auto;">
      <Row class="mt10">
        <h2 class="tc">
          2018-2019学年度第一学期期末考试监考表
          <span>2019年6月20日至2019年6月21日</span>
        </h2>
        <h3 class="tc">注意：监考表一经发布不得调换和更改，如有变动请系部自行安排老师！</h3>
        <!-- 数据表 -->
        <CreateTable
          :data="item.data"
          :columnsOut="item.columns"
          v-for="(item,index) in data1"
          :key="index"
        />
      </Row>
    </div>
    <!-- 打印区 -->
    <div style="position:fixed;top:0;left:-2000px;">
      <div id="examData" style="width:760px;margin-left:auto; margin-right:auto;">
      <Row class="mt10">
        <h2 class="tc">
          2018-2019学年度第一学期期末考试监考表
          <span>2019年6月20日至2019年6月21日</span>
        </h2>
        <h3 class="tc">注意：监考表一经发布不得调换和更改，如有变动请系部自行安排老师！</h3>
        <!-- 数据表 -->
        <CreateTable
          :data="item.data"
          :columnsOut="item.columns"
          v-for="(item,index) in data1"
          :key="index"
        />
      </Row>
    </div>
    </div>
    
  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
import CreateTable from "./table-title/createTable";
export default {
  name: "",
  components: {
    CreateTable
  },
  data() {
    return {
      pdfDom: "",
      data1: [
        {
          columns: [
            {
              title: "2019/4/27",
              children: [
                {
                  title: "8:30-9:30"
                },
                {
                  title: "9:45-10:45"
                },
                {
                  title: "11:00-12:00"
                },
                {
                  title: "13:30-14:30"
                }
              ]
            }
          ],
          data: [
            /**
             * 数据格式全部使用数组形式
             * className 为第一列。第一个置空，第二个起为班级名称
             * course1 为第二列 第一个数据为科目 ，第二个为老师姓名
             * course2 为第三列 第一个数据为科目 ，第二个为老师姓名
             * course3 ... 为其他列
             */
            /**
             * 数据格式全部使用数组形式
             * className 为第一列。第一个置空，第二个起为班级名称
             * course1 为第二列 第一个数据为科目 ，第二个为老师姓名
             * course2 为第三列 第一个数据为科目 ，第二个为老师姓名
             * course3 ... 为其他列
             */
            {
              className: [" ", "16级电商"],
              course1: ["图形图像处理（电商实训室）", "王蕊"],
              course2: ["网页制作（机房）", "张菁屏"],
              course3: ["", ""],
              course4: ["", ""]
            },
            {
              className: [" ", "16级会计"],
              course1: ["结算与汇兑", "刘怡临"],
              course2: ["", ""],
              course3: ["", ""],
              course4: ["", ""]
            },
            {
              className: [
                " ",
                "16级轨道1",
                "16级轨道2",
                "16级轨道3",
                "16级轨道4"
              ],
              course1: ["英语口语（开卷）", "董晓净", "杨洋", "柴晓薇", "潘瑾"],
              course2: ["综合实训", "李昀峰", "董晓净", "王育京", "张大伟"],
              course3: ["", "", " ", " ", " "],
              course4: ["", "", " ", " ", " "]
            },
            {
              className: [" ", "16级民航1", "16级民航2", "16级民航3"],
              course1: ["航空服务英语综合", "董晓净", "杨洋", "柴晓薇"],
              course2: ["民航货物运输实务", "李昀峰", "董晓净", "王育京"],
              course3: ["民航服务心理学", "李昀峰", "董晓净", "王育京"],
              course4: ["航空市场营销", "李昀峰", "董晓净", "王育京"]
            }
          ]
        },
        /*分割线*/
        {
          columns: [
            {
              title: "2019/4/28",
              children: [
                {
                  title: "8:30-9:30"
                },
                {
                  title: "9:45-10:45"
                },

                {
                  title: "13:30-14:30"
                }
              ]
            }
          ],
          data: [
            {
              className: [" ", "16级电商"],
              course1: ["图形图像处理（电商实训室）", "王蕊"],
              course2: ["网页制作（机房）", "张菁屏"],
              course3: ["", ""],
              course4: ["", ""]
            },
            {
              className: [" ", "16级会计"],
              course1: ["结算与汇兑", "刘怡临"],
              course2: ["", ""],
              course3: ["", ""],
              course4: ["", ""]
            },
            {
              className: [
                " ",
                "16级轨道1",
                "16级轨道2",
                "16级轨道3",
                "16级轨道4"
              ],
              course1: ["英语口语（开卷）", "董晓净", "杨洋", "柴晓薇", "潘瑾"],
              course2: ["综合实训", "李昀峰", "董晓净", "王育京", "张大伟"],
              course3: ["", "", " ", " ", " "],
              course4: ["", "", " ", " ", " "]
            },
            {
              className: [" ", "16级民航1", "16级民航2", "16级民航3"],
              course1: ["航空服务英语综合", "董晓净", "杨洋", "老罗"],
              course2: ["民航货物运输实务", "李昀峰", "董晓净", "老罗"],
              course3: ["民航服务心理学", "李昀峰", "董晓净", "老罗"],
              course4: ["航空市场营销", "李昀峰", "董晓净", "王育京"]
            }
          ]
        },
        /*分割线*/
        {
          columns: [
            {
              title: "2019/4/29",
              children: [
                {
                  title: "8:30-9:30"
                },
                {
                  title: "9:45-10:45"
                },

                {
                  title: "13:30-14:30"
                }
              ]
            }
          ],
          data: [
            {
              className: [" ", "16级电商"],
              course1: ["图形图像处理（电商实训室）", "王蕊"],
              course2: ["网页制作（机房）", "张菁屏"],
              course3: ["", ""],
              course4: ["", ""]
            },
            {
              className: [" ", "16级会计"],
              course1: ["结算与汇兑", "刘怡临"],
              course2: ["", ""],
              course3: ["", ""],
              course4: ["", ""]
            },
            {
              className: [
                " ",
                "16级轨道1",
                "16级轨道2",
                "16级轨道3",
                "16级轨道4"
              ],
              course1: ["英语口语（开卷）", "董晓净", "杨洋", "柴晓薇", "潘瑾"],
              course2: ["综合实训", "李昀峰", "董晓净", "王育京", "张大伟"],
              course3: ["", "", " ", " ", " "],
              course4: ["", "", " ", " ", " "]
            },
            {
              className: [" ", "16级民航1", "16级民航2", "16级民航3"],
              course1: ["航空服务英语综合", "董晓净", "杨洋", "老罗"],
              course2: ["民航货物运输实务", "李昀峰", "董晓净", "老罗"],
              course3: ["民航服务心理学", "李昀峰", "董晓净", "老罗"],
              course4: ["航空市场营销", "李昀峰", "董晓净", "王育京"]
            }
          ]
        }
      ]
    };
  },
  methods: {
    //导出exportData
    printData() {
      this.pdfDom = "examData";
      this.htmlTitle = "监考总览";
      this.getPdfs();
    },
    getPdfs() {
      //留白
      var whiteImg =
        "";
      var title = this.htmlTitle;
        html2Canvas(document.querySelector("#" + this.pdfDom),{
            scale: 2 // 提升画面质量，但是会增加文件大小
        }).then(function(canvas){
            /**jspdf将html转为pdf一页显示不截断，整体思路：
         * 1. 获取DOM 
         * 2. 将DOM转换为canvas
         * 3. 获取canvas的宽度、高度（稍微大一点） 
         * 4. 将pdf的宽高设置为canvas的宽高
         * 5. 将canvas转为图片
         * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）841.89
         */

        // 得到canvas画布的单位是px 像素单位
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        // 将canvas转为base64图片
        var pageData = canvas.toDataURL('image/jpeg', 1.0)

        // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
        // 2为上面的scale 缩放了2倍
        var pdfX = contentWidth / 2 * 0.75
        var pdfY = contentHeight/ 2 * 0.75 

        //页面留白
        var whiteHeight = 30;
        let left=10;

        //一张pdf尺寸
        var pdfW = 595.32;
        var pdfH = 841.89
        
        // 设置内容图片的尺寸，img是pt单位 
        var imgX = pdfX;
        var imgY = (contentHeight / 2 * 0.75); 
        var imgH = pdfH - whiteHeight*2;//内容区高度
        //偏移量
        var position = whiteHeight;
        var pageTempHeight = (contentHeight / 2 * 0.75);
        // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
        var PDF = new JsPDF('', 'pt', 'a4');
        if(imgY<imgH){
            PDF.addImage(whiteImg, 'jpeg', left, 0, pdfW, whiteHeight)
            PDF.addImage(pageData, 'jpeg', left, 0, imgX, imgH)
            PDF.addImage(whiteImg, 'jpeg', left, (imgH+whiteHeight), pdfW, whiteHeight)
        }else{
            while(pageTempHeight>0){
                //内容区
                PDF.addImage(pageData, 'jpeg', left, position, imgX, imgY)
                //头部留白
                PDF.addImage(whiteImg, 'jpeg', left, 0, pdfW, whiteHeight)
                //底部留白
                PDF.addImage(whiteImg, 'jpeg', left, (imgH+whiteHeight+1), pdfW, whiteHeight)
                position -= imgH;
                pageTempHeight -= imgH;
                if(pageTempHeight>0){
                    PDF.addPage();
                }
            }
        }
        // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
        
        PDF.save('download.pdf')
        });
    }
  }
};
</script>

<style lang="" scoped>
</style>